import React, { useEffect, useState } from "react"
import styles from "./viewPlan.less"
import { observer } from "mobx-react-lite"
import { Select, Collapse, Progress, Table } from "antd"
import { TeamOutlined, CheckCircleOutlined, HistoryOutlined } from '@ant-design/icons';
import {
    getSelectClassPlan,
} from "@/services/index"

import {
    ISelectClassPlan,
    ISelectClassPlanInit,
    IClassPank
} from "@/utils/interface"

import useStore from "@/context/useStore"


const ViewPlan: React.FC = () => {

    let [SelectClassPlan, setSelectClassPlan] = useState<ISelectClassPlan[]>([])

    let viewPlanStatus = ["总人数", "完成率", "按期完成人数", "延期未完成人数"]

    let { viewPlans } = useStore()
    let [defaultProjectList,setDefaultProjectList] = useState<IClassPank[]>([])

    useEffect(() => {
        getSelectClassPlan().then((res: any) => {
            setSelectClassPlan(res.data)
        })
    }, [])

    //发起请求获取实训进度监控头部数据和页面需要渲染的数据
    useEffect(() => {
        viewPlans.getSelectClassPlan()
        viewPlans.getSelectClassPlanInit()
    }, [])


    let [defaultViewPlanList, setDefaultViewPlanList] = useState<ISelectClassPlanInit>({
        className: "网站2021A班",
        id: "9caafee189ea4165aa2e9d6c5c745321",
        classid: "9",
        planname: "的观点",
        begintime: "2021-05-11 00:00:00",
        states: "0",
        progress: "0",
        countStus: 10,
        countUncompleted: 0,
        description: "0",
        list: [
            {
                "id": "eb34ba03317e42a4888b847f4e19751a",
                "classid": null,
                "groupname": "组1",
                "members": 4,
                "finished": 1,
                "unfinished": 3,
                "stuList": [
                    {
                        "groupid": "eb34ba03317e42a4888b847f4e19751a",
                        "groupname": "组1",
                        "members": "4",
                        "userid": "21474836431",
                        "username": "杨明辉",
                        "endtime": null,
                        "sProList": [
                            {
                                "proid": "8069838561594679296",
                                "proname": "北京人工智能",
                                "length": "",
                                "taskList": null,
                                "sTaskList": [],
                                "taskCompletedCount": null,
                                "taskCompletedpProgress": null,
                                "beginTime": "2021-05-19 00:00:00",
                                "endTime": "2021-05-27 00:00:00"
                            }
                        ],
                        "proList": null,
                        "taskCompletedCount": 0,
                        "taskCompletedpProgress": 0,
                        "studentUrl": null,
                        "num": 1
                    },
                    {
                        "groupid": "eb34ba03317e42a4888b847f4e19751a",
                        "groupname": "组1",
                        "members": "4",
                        "userid": "21474836434",
                        "username": "胡同学",
                        "endtime": null,
                        "sProList": [
                            {
                                "proid": "8069838561594679296",
                                "proname": "北京人工智能",
                                "length": "",
                                "taskList": null,
                                "sTaskList": [],
                                "taskCompletedCount": null,
                                "taskCompletedpProgress": null,
                                "beginTime": "2021-05-19 00:00:00",
                                "endTime": "2021-05-27 00:00:00"
                            }
                        ],
                        "proList": null,
                        "taskCompletedCount": 3,
                        "taskCompletedpProgress": 0,
                        "studentUrl": null,
                        "num": 1
                    },
                    {
                        "groupid": "eb34ba03317e42a4888b847f4e19751a",
                        "groupname": "组1",
                        "members": "4",
                        "userid": "21474836436",
                        "username": "高健要",
                        "endtime": null,
                        "sProList": [
                            {
                                "proid": "8069838561594679296",
                                "proname": "北京人工智能",
                                "length": "",
                                "taskList": null,
                                "sTaskList": [],
                                "taskCompletedCount": null,
                                "taskCompletedpProgress": null,
                                "beginTime": "2021-05-19 00:00:00",
                                "endTime": "2021-05-27 00:00:00"
                            }
                        ],
                        "proList": null,
                        "taskCompletedCount": 0,
                        "taskCompletedpProgress": 0,
                        "studentUrl": null,
                        "num": 1
                    },
                    {
                        "groupid": "eb34ba03317e42a4888b847f4e19751a",
                        "groupname": "组1",
                        "members": "4",
                        "userid": "21474836435",
                        "username": "赵同学",
                        "endtime": null,
                        "sProList": [
                            {
                                "proid": "8069838561594679296",
                                "proname": "北京人工智能",
                                "length": "",
                                "taskList": null,
                                "sTaskList": [],
                                "taskCompletedCount": null,
                                "taskCompletedpProgress": null,
                                "beginTime": "2021-05-19 00:00:00",
                                "endTime": "2021-05-27 00:00:00"
                            }
                        ],
                        "proList": null,
                        "taskCompletedCount": 1,
                        "taskCompletedpProgress": 0,
                        "studentUrl": null,
                        "num": 1
                    }
                ],
                "groupProgress": 38,
                "myProject": [
                    {
                        "proid": "8069838561594679296",
                        "proname": "北京人工智能",
                        "length": "",
                        "taskList": [],
                        "sTaskList": null,
                        "taskCompletedCount": null,
                        "taskCompletedpProgress": null,
                        "beginTime": "2021-05-19 00:00:00",
                        "endTime": "2021-05-27 00:00:00"
                    }
                ]
            },
            {
                "id": "7473f41a57c44133a6c5bc8d5d7f8deb",
                "classid": null,
                "groupname": "组2",
                "members": 3,
                "finished": 0,
                "unfinished": 3,
                "stuList": [
                    {
                        "groupid": "7473f41a57c44133a6c5bc8d5d7f8deb",
                        "groupname": "组2",
                        "members": "3",
                        "userid": "21474836441",
                        "username": "王冠",
                        "endtime": null,
                        "sProList": [
                            {
                                "proid": "8072330789273837568",
                                "proname": "聊天机器人",
                                "length": "",
                                "taskList": null,
                                "sTaskList": [],
                                "taskCompletedCount": null,
                                "taskCompletedpProgress": null,
                                "beginTime": "2021-05-19 00:00:00",
                                "endTime": "2021-05-27 00:00:00"
                            }
                        ],
                        "proList": null,
                        "taskCompletedCount": 0,
                        "taskCompletedpProgress": 0,
                        "studentUrl": null,
                        "num": 2
                    },
                    {
                        "groupid": "7473f41a57c44133a6c5bc8d5d7f8deb",
                        "groupname": "组2",
                        "members": "3",
                        "userid": "21474836442",
                        "username": "黄琼",
                        "endtime": null,
                        "sProList": [
                            {
                                "proid": "8072330789273837568",
                                "proname": "聊天机器人",
                                "length": "",
                                "taskList": null,
                                "sTaskList": [],
                                "taskCompletedCount": null,
                                "taskCompletedpProgress": null,
                                "beginTime": "2021-05-19 00:00:00",
                                "endTime": "2021-05-27 00:00:00"
                            }
                        ],
                        "proList": null,
                        "taskCompletedCount": 0,
                        "taskCompletedpProgress": 0,
                        "studentUrl": null,
                        "num": 2
                    },
                    {
                        "groupid": "7473f41a57c44133a6c5bc8d5d7f8deb",
                        "groupname": "组2",
                        "members": "3",
                        "userid": "21474836437",
                        "username": "徐锦阳",
                        "endtime": null,
                        "sProList": [
                            {
                                "proid": "8072330789273837568",
                                "proname": "聊天机器人",
                                "length": "",
                                "taskList": null,
                                "sTaskList": [],
                                "taskCompletedCount": null,
                                "taskCompletedpProgress": null,
                                "beginTime": "2021-05-19 00:00:00",
                                "endTime": "2021-05-27 00:00:00"
                            }
                        ],
                        "proList": null,
                        "taskCompletedCount": 0,
                        "taskCompletedpProgress": 0,
                        "studentUrl": null,
                        "num": 2
                    }
                ],
                "groupProgress": 0,
                "myProject": [
                    {
                        "proid": "8072330789273837568",
                        "proname": "聊天机器人",
                        "length": "",
                        "taskList": [],
                        "sTaskList": null,
                        "taskCompletedCount": null,
                        "taskCompletedpProgress": null,
                        "beginTime": "2021-05-19 00:00:00",
                        "endTime": "2021-05-27 00:00:00"
                    }
                ]
            },
            {
                "id": "aad950e2800b49d39e3b94afc24d5fe9",
                "classid": null,
                "groupname": "组3",
                "members": 3,
                "finished": 0,
                "unfinished": 3,
                "stuList": [
                    {
                        "groupid": "aad950e2800b49d39e3b94afc24d5fe9",
                        "groupname": "组3",
                        "members": "3",
                        "userid": "21474836446",
                        "username": "牛莉",
                        "endtime": null,
                        "sProList": [
                            {
                                "proid": "8073019399648550912",
                                "proname": "数据处理项目",
                                "length": "",
                                "taskList": null,
                                "sTaskList": [],
                                "taskCompletedCount": null,
                                "taskCompletedpProgress": null,
                                "beginTime": "2021-05-19 00:00:00",
                                "endTime": "2021-05-27 00:00:00"
                            }
                        ],
                        "proList": null,
                        "taskCompletedCount": 0,
                        "taskCompletedpProgress": 0,
                        "studentUrl": null,
                        "num": 3
                    },
                    {
                        "groupid": "aad950e2800b49d39e3b94afc24d5fe9",
                        "groupname": "组3",
                        "members": "3",
                        "userid": "21474836445",
                        "username": "黄辉",
                        "endtime": null,
                        "sProList": [
                            {
                                "proid": "8073019399648550912",
                                "proname": "数据处理项目",
                                "length": "",
                                "taskList": null,
                                "sTaskList": [],
                                "taskCompletedCount": null,
                                "taskCompletedpProgress": null,
                                "beginTime": "2021-05-19 00:00:00",
                                "endTime": "2021-05-27 00:00:00"
                            }
                        ],
                        "proList": null,
                        "taskCompletedCount": 0,
                        "taskCompletedpProgress": 0,
                        "studentUrl": null,
                        "num": 3
                    },
                    {
                        "groupid": "aad950e2800b49d39e3b94afc24d5fe9",
                        "groupname": "组3",
                        "members": "3",
                        "userid": "21474836430",
                        "username": "古昌军",
                        "endtime": null,
                        "sProList": [
                            {
                                "proid": "8073019399648550912",
                                "proname": "数据处理项目",
                                "length": "",
                                "taskList": null,
                                "sTaskList": [],
                                "taskCompletedCount": null,
                                "taskCompletedpProgress": null,
                                "beginTime": "2021-05-19 00:00:00",
                                "endTime": "2021-05-27 00:00:00"
                            }
                        ],
                        "proList": null,
                        "taskCompletedCount": 0,
                        "taskCompletedpProgress": 0,
                        "studentUrl": null,
                        "num": 3
                    }
                ],
                "groupProgress": 0,
                "myProject": [
                    {
                        "proid": "8073019399648550912",
                        "proname": "数据处理项目",
                        "length": "",
                        "taskList": [],
                        "sTaskList": null,
                        "taskCompletedCount": null,
                        "taskCompletedpProgress": null,
                        "beginTime": "2021-05-19 00:00:00",
                        "endTime": "2021-05-27 00:00:00"
                    }
                ]
            }
        ],
        endtime: "2021-05-17 00:00:00",
        countCompleted: "0"
    })

    function setSubseString (value:string){
        let classId = value.slice(0, 1)
        let id = value.slice(1)
        viewPlans.getSelectClassPlan(classId, id)
        viewPlans.getSelectClassPlanInit(classId, id)
        viewPlans.getClassPank(classId, id)
        
        setTimeout(()=>{
            console.log(viewPlans.SelectClassPlanInit)
            setDefaultViewPlanList(viewPlans.SelectClassPlanInit)
            setDefaultProjectList(viewPlans.ClassPankList)
            let Count0:any = document.getElementById("list_Count0")
            Count0.style.background = "rgb(227, 73, 73)"
            Count0.style.color = "#fff"
            let Count1:any = document.getElementById("list_Count1")
            Count1.style.background = "rgb(250, 195, 23)"
            Count1.style.color = "#fff"
            let Count2:any = document.getElementById("list_Count2")
            Count2.style.background = "rgb(103, 156, 246)"
            Count2.style.color = "#fff"
        },1500)
    }

    const { Panel } = Collapse;

    

    return <div className={styles.viewplan}>
        
        <section className={styles.viewPlan_Header}>
            <div className={styles.viewPlan_HeaderTop}>
                <h4>{defaultViewPlanList?.className}</h4>
                <h2>{defaultViewPlanList.planname}</h2>
                <p>{defaultViewPlanList?.begintime}~ {defaultViewPlanList.endtime}</p>
                <Select className={styles.SelectList} onChange={setSubseString}>
                    {
                        SelectClassPlan.map((item) => {
                            return <Select.Option onClick={() => {
                            }} key={item.id} value={item.classid + item.id}>{item.planname}</Select.Option>
                        })
                    }
                </Select>
            </div>
            <div className={styles.viewPlan_HeaderBottom}>
                <div className={styles.HeaderBottom_list}>
                    <h1 className={styles.sh1}>{defaultViewPlanList.countStus}</h1>
                    <p>{viewPlanStatus[0]}</p>
                </div>
                <div className={styles.HeaderBottom_list}>
                    <h1 className={styles.sh2}>{defaultViewPlanList.progress}%</h1>
                    <p>{viewPlanStatus[1]}</p>
                </div>
                <div className={styles.HeaderBottom_list}>
                    {
                        defaultViewPlanList.countCompleted ? <h1 className={styles.sh3}>{defaultViewPlanList.countCompleted}</h1> : <h1 className={styles.sh3}>0</h1>
                    }
                    <p>{viewPlanStatus[2]}</p>
                </div>
                <div className={styles.HeaderBottom_list}>
                    <h1 className={styles.sh4}>{defaultViewPlanList.countUncompleted}</h1>
                    <p>{viewPlanStatus[3]}</p>
                </div>
            </div>
        </section>
        <section className={styles.viewPlan_body}>
            <div className={styles.viewPlan_body_left}>
                {
                    defaultViewPlanList.list.map((item, index) => {
                        return <div key={index} className={styles.body_left_items}>
                            <div>
                                <h3>{item.groupname}</h3>
                                <Progress strokeColor="orange" status="active" size="default" percent={item.groupProgress} />
                            </div>
                            <Collapse
                                defaultActiveKey={['1']}
                                expandIconPosition="right"
                            >
                                <Panel key="1" header={<span>
                                    <span><TeamOutlined twoToneColor="blue" />人员&emsp;{item.members}</span>&emsp;&emsp;
                                    <span><CheckCircleOutlined />按期完成&emsp;{item.finished}</span>&emsp;&emsp;
                                    <span><HistoryOutlined />延期未完成&emsp;{item.unfinished}</span>
                                </span>}>
                                    <div className={styles.ViewPlanList}>
                                        <div className={styles.list_green}></div>
                                        <span>已完成</span><div className={styles.list_orange}></div><span>进行中</span><div className={styles.list_ccc}></div><span>未进行</span></div>
                                    <Table columns={[{ "title": "姓名", "dataIndex": "username" }, { "title": defaultViewPlanList.planname,"dataIndex":"title" },{"title":"时长：" + item.members + "天"}]} dataSource={item.stuList.map((ite)=>{
                                        return {"username":ite.username,key:ite.userid} as any
                                    })}  pagination={false} />
                                </Panel>
                            </Collapse>
                        </div>
                    })
                }
            </div>
            <div className={styles.viewPlan_body_right}>
                <h2>班级排行榜</h2>
                {
                    defaultViewPlanList.list.length?defaultProjectList.map((item,index)=>{
                        return <div className={styles.Plan_list} key={index}>
                            <div className={styles.Plan_list_Img}>
                                <img src={"http://111.203.59.61:8060" + item.studentUrl} alt=""/>
                            </div>
                            <div className={styles.Plan_list_Text}>
                                <h3>{item.username}</h3>
                                <p>{item.groupname}</p>
                            </div>
                            <div className={styles.Plan_list_Font}>
                                <h2>{item.taskCompletedpProgress*100 + "%"}</h2>
                            </div>
                            {
                                index<3?<div className={styles.Plan_list_Count} id={`list_Count${index}`}>
                                    Top.{index+1}
                                </div>:<div className={styles.Plan_list_Counts}>{index+1}</div>
                            }
                        </div>
                    }):<h4>暂无数据</h4>
                }
            </div>
        </section>
    </div>
}

export default observer(ViewPlan)